<template>
	<!-- 品牌管理 -->
	<div id="brand">
		<div id="bgkt">
			<img src="../../assets/logo.png" id="home" /> > 品牌管理
		</div>
		<div id="bgk">
			<div id="brandbody">
				<div id="sous">
					<div id="sousl">
						<img src="../../assets/logo.png" />
					</div>
					<div id="souslspan">筛选查询</div>
					<div id="sousr">
						<span>模糊条件查询</span>
						<!-- <el-input placeholder="请输入任务标题" v-model="findParam.ttitle" style="width: 150px"></el-input> -->
						<input type="text" placeholder="请输入品牌名称或者缩写查询" v-model="name.brandName" id="sousrk" />
						<input type="button" value="查询" class="sousrb" @click="loaDate()" />
					</div>
				</div>
			</div>
			<div id="brandfoot">
				<div id="brandfoot_1">
					<input type="button" value="新增" class="sousrb" @click="dialogFormVisible = true" />
					<input type="button" value="修改" @click="updatebtn()" class="sousrb"  />
					<input type="button" value="删除" @click="deleteGoods()" class="sousrb" />
					<!-- <el-button type="danger" plain :disabled="isShow" @click="deleteGoods">删除</el-button> -->
				</div>
			</div>
			<div>
				<el-dialog title="新增品牌信息" :visible.sync="dialogFormVisible" width="800PX">
					<el-form :model="form">
						品牌名称
						<el-input v-model="insertData.brandName"></el-input>
						品牌首字母
						<el-input v-model="insertData.brandInitials"></el-input>
						排序
						<el-input v-model="insertData.brandSort"></el-input>
						是否显示
						<el-radio v-model="insertData.brandIsdisplay" label='是'>是</el-radio>
						<el-radio v-model="insertData.brandIsdisplay" label='否'>否</el-radio>
						<br />
						商品大类<input type="button" @click="selectspfl" value="展示类别" />
						<el-input v-model="goodsData.primaryCategoryName"></el-input>
						<template>
							<el-table :data="goodsData" style="width: 80%">
							  <el-table-column prop="primaryCategoryId" label="类别序号" width="180">
							  </el-table-column>
							  <el-table-column prop="primaryCategoryName" label="类别名称">
							  </el-table-column>
							</el-table>
						</template>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="insertParameter">新增</el-button>
					</div>
				</el-dialog>
			</div>
			<!-- 修改 -->
			<div>
				<el-dialog title="修改品牌信息" :visible.sync="dialogFormVisible2" width="800PX">
					<el-form :model="form">
						品牌编号
						<el-input v-model="updateData.brandId"></el-input>
						品牌名称
						<el-input v-model="updateData.brandName"></el-input>
						品牌首字母
						<el-input v-model="updateData.brandInitials"></el-input>
						排序
						<el-input v-model="updateData.brandSort"></el-input>
						是否显示
						<el-radio v-model="updateData.brandIsdisplay" label='是'>是</el-radio>
						<el-radio v-model="updateData.brandIsdisplay" label='否'>否</el-radio>
						<br />
						商品大类<input type="button" @click="selectspfl" value="搜索" />
						<el-input v-model="goodsfl" placeholder="输入商品大类搜索"></el-input>
						<template>
							<el-table :data="goodsData" style="width: 80%">
							  <el-table-column prop="primaryCategoryId" label="类别序号" width="180">
							  </el-table-column>
							  <el-table-column prop="primaryCategoryName" label="类别名称">
							  </el-table-column>
							</el-table>
						</template>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible2 = false">取 消</el-button>
						<el-button type="primary" @click="UpdateParameter">修改</el-button>
					</div>
				</el-dialog>
			</div>
			<template>
				<el-table :data="tableData"  border style="width: 100%" @select='onTableSelect'
					@selection-change="handleSelectionChange">
					<el-table-column align="center" width="50" type="selection"> </el-table-column>
					<el-table-column prop="brandId" label="编号" width="180" >
					</el-table-column>
					<el-table-column prop="brandName" label="品牌名称" width="180">
					</el-table-column>
					<el-table-column prop="brandInitials" label="品牌首字母">
					</el-table-column>
					<el-table-column prop="brandSort" label="排序">
					</el-table-column>
					<el-table-column prop="brandIsdisplay" label="显示">
					</el-table-column>
				</el-table>
			</template>
			<el-pagination @current-change="changePage" layout="prev, pager, next"
			  :total="total" :current-page="page.indexPage"
			  :page-size="page.pageSize"
			  style="float: right;margin-right: 25px;">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isShow:false,
				page:{//分页参数
					indexPage:1,
					pageSize:3
				},
				total:0,//总页数
				upList:[],
				//商品分類信息集合
				gdList: [],
				gdList2: [],
				//id集合
				list: [],
				brandIdList: [],
				goodsfl: '',
				chex: [],
				//按钮
				bth: [],
				insertData: {
					brandName: null,
					brandInitials: null,
					brandIsdisplay: null,
					brandSort: null
				},
				//修改品牌信息
				updateData: {
					brandId: '',
					brandName: '',
					brandInitials: '',
					brandIsdisplay: '是',
					brandSort: ''
				},
				yema: {
					current: 0,
					pages: 0,
				},
				dialogTableVisible: false,
				dialogFormVisible: false,
				dialogFormVisible2: false,
				name: {
					brandName:"",
					brandInitials:""
				},
				goodsData: [],
				goodsData2: [{
					catDesc: "",
					catLev: "",
					catRoute: "",
					evalPicDef: "",
					goodId: "",
					goodName: "",
					isShow: "",
					sortNo: "",
					tCatId: "",
					unit: "",
				}],
				selects:[],
				tableData: [],
				// gridData: [],
				form: {},
				formLabelWidth: '120px'
			}
		},
		created(){
			this.selectBrand();
			//this.loaDate();
		},
		methods: {
			//根据条件查找
			loaDate() {
				console.log(this.name)
			this.$http.post("/goods-brand/brandBuyQuery",{
							brandPageParam:this.page,
							brandQueryByCriteriaParam:this.name
							}).then((resp)=>{
								console.log(resp.data.data)
					this.tableData=resp.data.data.brandDtoList;
					this.total=resp.data.data.pageSize;
					this.page.indexPage=resp.data.data.indexSize;
				}).catch(function(error){
					alert(error);
				})
			},
			//查询品牌
			selectBrand(){
				this.$http.get("/goods-brand/brandInquiry",{
					params:this.page,
				}).then(resp=>{
					//console.log(resp.data.data)
					    this.tableData=resp.data.data.brandDtoList;
						this.total=resp.data.data.pageSize;
						this.page.indexPage=resp.data.data.indexSize;
					}).catch(function(error){
					    alert(error);
				})
			},
			onTableSelect(rows, row) {
				//console.log(rows)
				let selected = rows.length && rows.indexOf(row) !== -1
				//console.log(selected);
			},
			//新增的
			onTableSelect2(rows, row) {
				let selected = rows.length && rows.indexOf(row) !== -1
				//console.log(selected);
			},
			handleSelectionChange(val) {
				this.selects=[];
				for(var i=0;i<val.length; i++){
					this.selects.push(val[i].brandId)
				}
				this.multipleSelection = val;
				this.list = val;
				this.upList = val;
				//console.log(this.upList);
			},
			// handleSelectionChange2(val) {
			// 	this.gdList = val;
			// 	console.log(val);
			// },
			//修改的
			onTableSelect3(rows, row) {
				let selected = rows.length && rows.indexOf(row) !== -1
				//console.log(selected);
			},
			handleSelectionChange3(val) {
				this.gdList2 = val;
				//console.log(val);
			},
			//更新按钮
			updatebtn(){
				if(this.upList.length==1){
					this.dialogFormVisible2 =true;
					this.updateData.brandId=this.upList[0].brandId;
					this.updateData.brandName=this.upList[0].brandName;
					this.updateData.brandInitials=this.upList[0].brandInitials;
					this.updateData.brandIsdisplay=this.upList[0].brandIsdisplay;
					this.updateData.brandSort=this.upList[0].brandSort;
				}else{
					alert("请每次选择一个修改");
				}	
			},
			//字符串转时间
			datolong(s){
				var d = new Date(s).getTime();
				return d;
			},
			//查询大类名称
			selectspfl(){
				this.$http.get("/goods/selectCategoryName").then(resp=>{
					this.goodsData=resp.data.data.selectCategoryNameListDtos;
				})
			},
			//新增
			insertParameter(){
				this.page.indexPage=1;
				this.selectBrand();
				this.$http.post("/goods-brand/addBrand",this.insertData).then(resp=>{
					if(resp.data.code==707){
							alert("添加成功");
							this.selectBrand();
							this.dialogFormVisible=false;
						}else{
							alert("添加失败");
						}
					}).catch(function(error){
						console.log(error);
				})
			},
			changePage(index){
			   this.page.indexPage=index;
			   this.selectBrand();
			},
			//修改
			UpdateParameter() {
					for (var i = 0; i < this.gdList2.length; i++) {
						this.updateData.list.push(this.gdList2[i].goodId)
					}
					//console.log(this.updateData.list);
					
					this.$http.put("goods-brand/updateBrand",
						this.updateData
					).then(resp=>{
						if(resp.data.code==705){
							this.$message({
								message:'删除成功',
								type:'success'
							})
							this.dialogFormVisible2 = false;
							this.page.indexPage=1;
							this.selectBrand();
						}else{
							this.$message({
								message:'删除失败',
								type:'success',
							})	
						}
					})
			},
			// handleSelectionChange(sel){
			// 	this.selects=[];
			// 	for(var i=0;i<sel.length; i++){
			// 		this.selects.push(sel[i].brandId)
			// 	}
			// },
			//删除商品品牌
			deleteGoods(){
				this.$http.post("/goods-brand/deleteBrand",{
					idsList:this.selects
				}).then((resp)=>{
					if(resp.data.code==703){
						this.$message({
							message:'删除成功',
							type:'success'
						})
						this.page.indexPage=1;
						this.selectBrand();
					}else{
						this.$message({
							message:'删除失败',
							type:'success',
						})	
					}
				})
			}
			
		}
	}
</script>
      
<style>
    #bgkt {
		width: 90%;
		height: 40px;
	}

	#bgk {
		float: left;
		border: #2C3E50 0px solid;
		width: 95%;
		height: 500px;
		background-color: whitesmoke;
	}

	#sous {
		width: 90%;
		height: 40px;
		float: left;
		border: #D8D8D8 2px solid;
		margin-left: 70px;
		margin-top: 20px;
		background-color: #E6E6E6;
	}

	#home {
		width: 20px;
		height: 20px;
	}

	#sousl {
		float: left;
		width: 40px;
		height: 100%;
		border-right: #D8D8D8 2px solid;
	}

	#sousl img {
		width: 35px;
		height: 35px;
	}

	#souslspan {
		float: left;
		width: 80px;
		height: 30px;
		border: #2C3E50 0px solid;
		margin-left: 10px;
		margin-top: 8px;
	}

	#sousr {
		float: right;
		width: 550px;
		height: 100%;
		border: #2C3E50 0px solid;
		line-height: 40px;
	}

	#sousrk {
		height: 70%;
		width: 240px;
		margin-left: 20px;
	}

	.sousrb {
		width: 100px;
		height: 30px;
		color: #FFFFFF;
		background-color: #848484;
		margin-left: 30px;
	}

	#brandfoot {
		width: 100%;
		height: 40px;
		border: #2C3E50 0px solid;
		float: left;
		background-color: #E6E6E6;
		margin-top: 15px;
	}

	#brandfoot_1 {
		width: 430px;
		height: 30px;
		border: #2C3E50 0px solid;
		float: right;
		margin-top: 5px;
	}

	.bd {
		width: 300px;
		height: 300px;
		border: #2C3E50 1px solid;
		float: left;
	}

	#ymbt {
		border: #2C3E50 0px solid;
		width: 130px;
		height: 30px;
		float: left;
		margin-top: 10px;
	}
</style>
